<!-- 历史记录 -->
<template>
	<view class="wrap">
		<u-navbar title="历史记录" :autoBack="false"  @leftClick="toHomeFun">
			<view class="u-nav-slot" slot="right">
				<view class="right-img" @click="$u.route('/pages/scans/seachRecordsOne?type=1')">
					<image src="/static/images/seach.png"></image>
				</view>
			</view>
		</u-navbar>
		<view class="head_box" :style="'top:'+statusBarHeight1+'px'">
			<view class="head_left">
				已记录{{dataList.length}}条
			</view>
			<view class="head_right" >
				<view class="head_right_text" v-if="show" @click="show = false">
					返回
				</view>
				<view class="head_right_text" v-else @click="showFun">
					管理
				</view>
			</view>
		</view>
		<view class="content" :style="'padding-top:'+statusBarHeight+'px'">
			<block  v-if="dataList.length">
				<view class="list" v-for="(item,index) in dataList" :key="index" @click="toInfoFun(item,index)">
					<view class="list_left">
						<view class="list_left_img">
							<image :src="item.data_image" mode="aspectFill"></image>
							<view class="take_icon" v-if="show" @click="mainInputFun(index)">
								<image v-if="item.main" :src="imgUrl + '22.png'" mode="aspectFill"></image>
								<image v-else :src="imgUrl + '5.png'" mode="aspectFill"></image>
							</view>
						</view>
						<view class="list_left_info">
							<view class="list_left_title line1">
								{{item.name}}
							</view>
							<view class="list_left_time">
								<view class="list_left_time_icon">
									<image :src="imgUrl + '18.png'" mode="aspectFill"></image>
								</view>
								<view class="list_left_time_text">
									{{item.create_at}}
								</view>
							</view>
						</view>
					</view>
					<view class="list_right" >
						<view class="list_right_text" v-if="item.grade">
							<view class="list_right_spot">
								含
								<!-- <image src="/static/images/details-5.png"></image> -->
							</view>
							<view class="list_right_rank" :class="item.grade=='B'?'b_color':item.grade=='B-'?'b1_color':item.grade=='A'?'a_color':item.grade=='C'?'c_color':item.grade=='D'?'d_color':''">
								{{item.grade || '暂无等'}}级
							</view>
						</view>
						<view class="list_right_text a_color" :style="item.grade?'margin-top: 20rpx;font-size: 28rpx;':'font-size: 28rpx;'" v-if="item.is_locked">已核对</view>
						<!-- <view class="del" @click.stop="delHistoryListOneFun([item.id],index)" :style="!item.grade?'margin-right:20rpx':''">
							<image src="/static/images/img-10.png"></image>
						</view> -->
						<view class="dian" v-if="item.is_locked && !item.is_look"></view>
					</view>
				</view>
			</block>
			<view v-else style="text-align: center;padding: 50rpx 0;">
				暂无数据
			</view>
		</view>
		<view class="base_box" v-if="show">
			<view class="base_info">
				<view class="base_left">
					<view class="take_icon" @click="allMainFun(allMain)">
						<image v-if="allMain" :src="imgUrl + '22.png'" mode="aspectFill"></image>
						<image v-else :src="imgUrl + '5.png'" mode="aspectFill"></image>
					</view>
					<text style="margin-right: 30rpx;">全选</text>
					已选:{{nums}}
				</view>
				<view class="base_right one" @click="showFunOne">
					批量核对
				</view>
				<view class="base_right" @click="showFun">
					删除记录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { historyList,getGoodsDetail,delHistoryList,delHistoryListOne,setHistoryLook } from '@/api/api'
	export default {
		data() {
			return {
				navBarHeight:'',
				allMain:false,
				show:false,
				query: {
					page: 1,
					limit: 100
				},
				dataList: [],
				nums:0,
				bottomMain: false,
				statusBarHeight:0,
				statusBarHeight1:0,
				type:0
			};
		},
		onLoad(opition) {
			const that = this;
			uni.getSystemInfo({
				success(res) {
					that.statusBarHeight1 = res.statusBarHeight+43;
					that.statusBarHeight = res.statusBarHeight + 100;
				}
			});
			if(opition.type){
				this.type = opition.type
			}
			this.query = {
				page: 1,
				limit: 100
			}
			this.bottomMain = false
			this.dataList = []
			this.getListFun();
		},
		onReachBottom() {
			if (!this.bottomMain) {
				this.query.page += 1;
				this.getListFun();
			}
		},
		onBackPress() {
			if(this.type == 1){
				return uni.reLaunch({
					url:'/pages/tabbar/index'
				})
			}
		},
		methods: {
			allMainFun(value){
				if(value){
					this.dataList = this.dataList.map((item)=>{
						item.main = false
						return item
					})
					this.nums = 0
					this.allMain = false
					this.$forceUpdate()
				}else{
					this.dataList = this.dataList.map((item)=>{
						item.main = true
						return item
					})
					this.nums = this.dataList.length
					this.allMain = true
					this.$forceUpdate()
				}
			},
			seTallMainFun(){
				let num = 0;
				this.dataList.forEach((item)=>{
					console.log(item.main)
					if(item.main){
						num ++;
					}
				})
				if(num == this.dataList.length){
					this.allMain = true
				}else{
					this.allMain = false
				}
			},
			mainInputFun(index){
				let num = 0
				this.dataList.forEach((item,nums)=>{
					if(nums == index){
						this.dataList[index].main = !this.dataList[index].main
					}
				})
				this.dataList.forEach((item)=>{
					console.log(item.main)
					if(item.main){
						num ++;
					}
				})
				this.nums = num
				this.seTallMainFun();
			},
			showFun(){
				if(this.show){
					let value = []
					this.dataList.forEach((item)=>{
						if(item.main){
							value.push(item.id)
						}
					})
					if(value.length){
						this.delHistoryListOneFun(value,null,true)
					}else{
						this.show = false
					}
				}else{
					this.show = true
				}
			},
			showFunOne(){
				const that = this;
				if(this.show){
					let value = []
					this.dataList.forEach((item,index)=>{
						if(item.main && item.is_locked && !item.is_look){
							value.push({
								value:item.gcode,
								index:index
							})
						}
					})
					if(value.length){
						uni.showModal({
							title:'温馨提示',
							content:'是否核对选中的条码',
							success(res) {
								if(res.confirm){
									setHistoryLook({
										gcode:value.map((item)=>{return item.value})
									})
									value.forEach((item)=>{
										that.dataList[item.index].is_look = 1;
									})
									that.$forceUpdate();
									that.show = false
								}
							}
						})
					}else{
						uni.$u.toast('请至少选择一个能核对的记录')
						this.show = false
					}
				}else{
					this.show = true
				}
			},
			toHomeFun(){
				if(this.type == 1){
					uni.reLaunch({
						url:'/pages/tabbar/index'
					})
				}else{
					uni.navigateBack()
				}
			},
			delHistoryListOneFun(value,index,main){
				const that = this;
				uni.showModal({
					title:'温馨提示',
					content:'是否删除当前记录',
					success(res) {
						if(res.confirm){
							delHistoryListOne({
								ids:value
							}).then((ress)=>{
								that.show = false;
								that.$u.toast('删除成功');
								if(!main){
									that.dataList.splice(index,1);
								}else{
									that.query = {
										page: 1,
										limit: 100
									}
									that.bottomMain = false;
									that.dataList = [];
									that.getListFun();
								}
								
								
							})
						}
					}
				});
			},
			setGradeFun(value){
				if(value > 50){
					if(value > 70){
						if(value > 85){
							return 'A'
						}else{
							return 'B'
						}
					}else{
						return 'C'
					}
				}else{
					return 'D'
				}
			},
			toInfoFun(item,index){
				if(!this.show){
					uni.showLoading({
						title: '获取中'
					})
					if(item.is_locked && !item.is_look){
						setHistoryLook({
							gcode:[item.gcode]
						})
						this.dataList[index].is_look = 1;
						this.$forceUpdate();
					}
					
					getGoodsDetail({
						gcode:item.gcode
					}).then((res)=>{
						uni.hideLoading();
						const { data } = res
						let calorie_num = parseFloat(data.info.calorie_num)
						let sugar_num = parseFloat(data.info.sugar_num)
						data.stage_list.calorie.forEach((item,index)=>{
							if(calorie_num >item){
								if(index == data.stage_list.calorie.length - 1 || calorie_num <= data.stage_list.calorie[index+1]){
									console.log(item)
									data.info.calorie_index = index+1
								}
							}
						})
						data.stage_list.sugar.forEach((item,index)=>{
							if(sugar_num >item){
								if(index == data.stage_list.sugar.length - 1 || sugar_num <= data.stage_list.sugar[index+1]){
									data.info.sugar_index = index+1
								}
							}
						})
						uni.setStorageSync('RetData',data)
						return uni.navigateTo({
							url:"/pages/scans/ScanResult"
						})
						// if(data.item_list.length || data.info.is_scan){
						// 	return uni.navigateTo({
						// 		url:"/pages/scans/ScanResult"
						// 	})
							
						// }else{
						// 	return uni.navigateTo({
						// 		url:"/pages/scans/codeResult"
						// 	})
						// }
					}).catch((e) => {
						uni.hideLoading();
						uni.$u.toast(typeof  e ===  'string'?e:'请检查网络连接');
					})
				}
			},
			getListFun() {
				const that = this
				uni.showLoading({
					title: '获取中'
				});
				historyList({
					page: this.query.page,
					limit:this.query.limit
				}).then((res) => {
					uni.hideLoading();
					if (that.query.page == 1) {
						that.dataList = res.data;
					} else {
						that.dataList.push(...res.data);
					}
					if (res.data.length != 100) {
						that.bottomMain = true
					}
				}).catch((e)=>{
					uni.hideLoading();
					uni.$u.toast(typeof  e ===  'string'?e:'请检查网络连接');
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.line1{
		white-space: nowrap;
		overflow: hidden;//文本超出隐藏
		text-overflow: ellipsis;//文本超出省略号替代
	}
	.d_color {
		color: #ee3a3a !important;
	}
	
	.d_bg {
		background: #ee3a3a !important;
	}
	
	.d_border {
		border: 1rpx solid #ee3a3a;
	}
	
	
	.c_color {
		color: #FEC817 !important;
	}
	
	.c_bg {
		background: #FEC817 !important;
	}
	
	.c_border {
		border: 1rpx solid #FEC817 !important;
	}
	
	.b1_color {
		color: #6AA300 !important;
	}
	
	.b1_bg {
		background: #6AA300 !important;
	}
	
	.b1_border {
		border: 1rpx solid #6AA300 !important;
	}
	
	.b_color {
		color: #00CC70 !important;
	}
	
	.b_bg {
		background: #00CC70 !important;
	}
	
	.b_border {
		border: 1rpx solid #00CC70 !important;
	}
	
	.a_color {
		color: #30C285 !important;
	}
	
	.a_bg {
		background: #30C285 !important;
	}
	
	.a_border {
		border: 1rpx solid #30C285 !important;
	}
	.wrap{
		width: 750rpx;
		background: #f6f7fb;
		min-height:100vh;
		.head_box{
			position: fixed;
			z-index: 999;
			width: 700rpx;
			height: 88rpx;
			background: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 15rpx 0 35rpx;
			.head_left{
				font-size: 30rpx;
				font-weight: bold;
				color: #434242;
			}
			.head_right{
				
				.head_right_text{
					width: 112rpx;
					height: 50rpx;
					border: 1rpx solid #b1b1b1;
					border-radius: 26rpx;
					font-size: 24rpx;
					line-height: 50rpx;
					text-align: center;
					color: #434242;
				}
				
			}
		}
		.content{
			width: 750rpx;
			height: auto;
			background: #f6f7fb;
			padding: 105rpx 0 120rpx;
			.list{
				margin: 0 20rpx 16rpx;
				width: 710rpx;
				background: #ffffff;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx 50rpx 30rpx 16rpx;
				box-sizing: border-box;
				.list_left{
					display: flex;
					align-items: center;
					.list_left_img{
						width: 131rpx;
						height: 131rpx;
						border-radius: 10rpx;
						overflow: hidden;
						position: relative;
						image{
							width: 100%;
							height: 100%;
						}
						.take_icon{
							position: absolute;
							top: 6rpx;
							left: 4rpx;
							width: 36rpx;
							height: 36rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
					}
					.list_left_info{
						margin-left: 22rpx;
						margin-right: 20rpx;
						width: 360rpx;
						.list_left_title{
							font-size: 34rpx;
							font-weight: bold;
							color: #434242;
						}
						.list_left_time{
							margin-top: 32rpx;
							display: flex;
							align-items: center;
							.list_left_time_icon{
								width: 24rpx;
								height: 24rpx;
								font-size: 0;
								image{
									width: 100%;
									height: 100%;
								}
							}
							.list_left_time_text{
								margin-left: 10rpx;
								font-size: 24rpx;
								color: #afafaf;
							}
						}
					}
				}
				.list_right{
					width: 160rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					position: relative;
					.dian{
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						background-color: #ee3a3a;
						position: absolute;
						right: -20rpx;
						top: calc(50% - 8rpx);
					}
					.list_right_num{
						font-size: 40rpx;
						font-family: DIN, DIN-Bold;
						font-weight: 700;
						text-align: left;
						color: #ee3a3a;
						margin-bottom: 10rpx;
					}
					.list_right_text{
						margin-top: 5rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						
						.list_right_spot{
							width: 40rpx;
							height: 40rpx;
							background: white;
							border-radius: 50%;
							line-height: 40rpx;
							color: #AFAFAF;
							font-size: 22rpx;
							font-weight: 400;
							text-align: center;
							position: relative;
							image{
								width: 20rpx;
								height: 24rpx;
								position: absolute;
								left: calc(50% - 10rpx);
								top: calc(50% - 12rpx);
							}
						}
						.list_right_rank{
							margin-left: 10rpx;
							font-size: 36rpx;
							font-weight: 700;
							color: #737373;
							width: 84rpx;
							text-align: left;
						}
					}
					.del{
						width: 40rpx;
						height: 40rpx;
						margin-top: 30rpx;
						image{
							width: 100%;
							height: 100%;
							display: inline-block;
							vertical-align: top;
						}
					}
				}
			}
		}
		
	}
	.base_box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 110rpx;
		background: #ffffff;
		.base_info{
			width: 665rpx;
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 50rpx 0 35rpx;
			.base_left{
				font-size: 28rpx;
				color: #434242;
				.take_icon{
					width: 36rpx;
					height: 36rpx;
					display: inline-block;
					vertical-align: top;
					margin-right: 10rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.base_right{
				width: 190rpx;
				height: 68rpx;
				background: #2767E6;
				border-radius: 34rpx;
				line-height: 68rpx;
				font-size: 24rpx;
				text-align: center;
				color: #ffffff;
			}
		}
	}
	.right-img{
		width: 40rpx;
		height: 40rpx;
		image{
			width: 100%;
			height: 100%;
			display: inline-block;
			vertical-align: top;
		}
	}
</style>
